<template>
	<el-dialog :title="title" width="800px" :visible.sync="dialogVisible">
		<el-form ref="form" :rules="rules" :model="form" label-width="80px">
			<el-form-item label="盲盒名称" prop="title">
				<el-input v-model="form.title"></el-input>
			</el-form-item>
			<el-form-item label="推广名称" prop="spread_title">
				<el-input v-model="form.spread_title"></el-input>
			</el-form-item>
			<el-form-item label="盲盒售价" prop="price">
				<el-input v-model="form.price"></el-input>
			</el-form-item>
			<el-form-item label="盲盒销量" prop="sell_num">
				<el-input v-model="form.sell_num"></el-input>
			</el-form-item>
			<el-form-item label="盲盒图片" prop="img">
				<crop-upload show-type="photo" :init-val="form.img" file-size="100K" wrapper-width="95px" wrapper-height="95px"
					@setVal="(val) => setUrl(val)" />
			</el-form-item>
			<el-form-item v-if="title=='添加盲盒'" label="盲盒套餐" prop="meal">
				<el-checkbox-group v-model="form.meal">
					<el-checkbox label="epic" @change="epicChange">
						传说&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<label v-show="epicShow">盲盒几率：<el-input v-model="probability.epic"
								style="width: 80px;margin-right: 20px;"></el-input></label>
					</el-checkbox><br />
					<el-checkbox label="mythology" @change="mythologyChange">
						史诗&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<label v-show="mythologyShow">盲盒几率：<el-input v-model="probability.mythology"
								style="width: 80px;margin-right: 20px;"></el-input></label>
					</el-checkbox><br />
					<el-checkbox label="legend" @change="legendChange">
						稀有&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<label v-show="legendShow">盲盒几率：<el-input v-model="probability.legend"
								style="width: 80px;margin-right: 20px;"></el-input></label>
					</el-checkbox><br />
					<el-checkbox label="collection" @change="collectionChange">
						尊贵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<label v-show="collectionShow">盲盒几率：<el-input v-model="probability.collection"
								style="width: 80px;margin-right: 20px;"></el-input></label>
					</el-checkbox><br />
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="盲盒排序" prop="sort">
				<el-input-number v-model="form.sort"></el-input-number>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button size="small" @click="handleCancle">取 消</el-button>
			<el-button size="small" type="primary" @click="submit">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
import {
	insertBox,updateBox
} from '@/api/audit'
import cropUpload from '@/components/cropUpload'
export default {
	components: {
		cropUpload
	},
	props:['editItem'],
	data() {
		return {
			checked: '',
			dialogVisible: false,
			form: {
				title: '',
				img: '',
				price: '',
				sell_num: '',
				sort: '',
				price: '',
				meal: [],
				spread_title: ''
			},
			probability: {
				epic: '',
				mythology: '',
				legend: '',
				collection: '',
				ordinary: ''
			},
			meal: [],
			list: [],
			epicShow: false,
			mythologyShow: false,
			legendShow: false,
			collectionShow: false,
			ordinaryShow: false,
			rules: {
				title: [{ required: true, message: '请输入盲盒名称', trigger: 'blur' }],
				spread_title: [{ required: true, message: '请输入盲盒推广名称', trigger: 'blur' }],
				price: [{ required: true, message: '请输入盲盒售价', trigger: 'blur' }],
				img: [{ required: true, message: '请输入盲盒图片', trigger: 'blur' }],
				sell_num: [{ required: true, message: '请输入盲盒销量', trigger: 'blur' }]
			}
		}
	},
	watch:{
		dialogVisible(val) {
			if (val) {
				if (this.title=='编辑盲盒') {
					console.log(this.editItem);
					for (const key in this.form) {
						this.form[key] = this.editItem[key]
					}
				} 
			}else {
					this.form= {
						title: '',
						img: '',
						price: '',
						sell_num: '',
						sort: '',
						price: '',
						meal: [],
						spread_title: ''
					}
				}
		}
	},
	methods: {
		handleCheckAllChange(e) {
			this.checked = e.toString()
		},
		setUrl(val) {
			this.form.img = val
			this.$emit('setUrl', val)
		},
		epicChange(e) {
			if (e == true) {
				this.epicShow = true
			} else {
				this.epicShow = false
				this.probability.epic = ''
			}
		},
		mythologyChange(e) {
			if (e == true) {
				this.mythologyShow = true
			} else {
				this.mythologyShow = false
			}
		},
		legendChange(e) {
			if (e == true) {
				this.legendShow = true
			} else {
				this.legendShow = false
			}
		},
		collectionChange(e) {
			if (e == true) {
				this.collectionShow = true
			} else {
				this.collectionShow = false
			}
		},
		ordinaryChange(e) {
			if (e == true) {
				this.ordinaryShow = true
			} else {
				this.ordinaryShow = false
			}
		},
		handleCancle(){
			this.dialogVisible = false;
			this.form= {
						title: '',
						img: '',
						price: '',
						sell_num: '',
						sort: '',
						price: '',
						meal: [],
						spread_title: ''
					}
		},
		submit() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					if (this.title=='编辑盲盒'){
						// 编辑
						let params={
							id:this.editItem.id,
							title :this.form.title,
							spread_title   :this.form.spread_title,
							img :this.form.img,
							price  :this.form.price,
							sell_num  :this.form.sell_num,
							sort :this.form.sort,
							is_meal:'2',
							meal:[]
						}
						updateBox(params).then(res=>{
							this.dialogVisible = false
							this.$emit('getList')
						})
					}else{
						let arr = []
					this.form.meal.forEach(e => {
						if (e == 'epic') {
							arr.push({
								type: 1,
								probability: this.probability.epic
							})
						} else if (e == 'mythology') {
							arr.push({
								type: 2,
								probability: this.probability.mythology
							})
						} else if (e == 'legend') {
							arr.push({
								type: 3,
								probability: this.probability.legend
							})
						} else if (e == 'collection') {
							arr.push({
								type: 4,
								probability: this.probability.collection
							})
						}
					});
					let params = {
						title: this.form.title,
						img: this.form.img,
						price: this.form.price,
						sell_num: this.form.sell_num,
						sort: this.form.sort,
						spread_title: this.form.spread_title,
						list: arr
					}
					insertBox(params).then(res => {
						this.dialogVisible = false
						this.$emit('getList')
					})
					}
				} else {
					this.$message({
						message: '请检查表单错误',
						type: 'error'
					})
					return false
				}
			})
		}
	}
}
</script>

<style></style>
